<template>
    <div :class="$style.topCards">
        <a-card :class="$style.item">
            <a-statistic title="设备数量"  :value="statisticsData.onlineDeviceCount + statisticsData.offlineDeviceCount">
                <template #suffix>
                    <span class="f-14">台</span>
                </template>
            </a-statistic>
            <div :class="$style.list">
                <span>在线：{{ statisticsData.onlineDeviceCount }}<span class="f-12">台</span></span>
                <span class="m-l-20" :class="$style.offline">离线：{{ statisticsData.offlineDeviceCount }}<span class="f-12">台</span></span>
            </div>
        </a-card>
        <a-card :class="$style.item">
            <a-statistic title="总收入" prefix="￥" :value="statisticsData.totalAmount" />
            <div :class="$style.list">
                <span>今天：<span class="f-12">￥</span>{{ statisticsData.todayAmount }}</span>
                <template v-if="statisticsData.todayAmount != statisticsData.yesterdayAmount">
                    <CaretUpOutlined v-if="statisticsData.todayAmount > statisticsData.yesterdayAmount" class="rise-color" />
                    <CaretDownOutlined v-else class="decline-color" />
                </template>
                <span class="m-l-20">昨天：<span class="f-12">￥</span>{{ statisticsData.yesterdayAmount }}</span>
            </div>
        </a-card>
        <a-card :class="$style.item">
            <a-statistic title="充电订单"  :value="statisticsData.totalChargeOrderCount">
                <template #suffix>
                    <span class="f-14">笔</span>
                </template>
            </a-statistic>
            <div :class="$style.list">
                <span>今天：{{ statisticsData.todayChargeOrderCount }}<span class="f-12">笔</span></span>
                <template v-if="statisticsData.todayChargeOrderCount != statisticsData.yesterdayChargeOrderCount">
                    <CaretUpOutlined v-if="statisticsData.todayChargeOrderCount > statisticsData.yesterdayChargeOrderCount" class="rise-color" />
                    <CaretDownOutlined v-else class="decline-color" />
                </template>
                <span class="m-l-20">昨天：{{ statisticsData.yesterdayChargeOrderCount }}<span class="f-12">笔</span></span>
            </div>
        </a-card>
    </div>

    <div class="m-t-20">
        <IncomeChargeCountCharts />
    </div>

</template>

<script lang="ts" setup>
    import { statisticsApi } from '@/api/Dashboard';
    import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
    import { ref } from 'vue';
    import IncomeChargeCountCharts from "./IncomeChargeCountCharts.vue";
    
    const statisticsData = ref({
        onlineDeviceCount : 0,
        offlineDeviceCount : 0,
        totalAmount : 0,
        totalChargeOrderCount : 0,

        todayAmount : 0,
        yesterdayAmount : 0,

        todayChargeOrderCount : 0,
        yesterdayChargeOrderCount : 0,
    })

    function queryStatistics() {
        statisticsApi().then(res => {
            const data = res.data
            statisticsData.value.offlineDeviceCount = data.offlineDeviceCount
            statisticsData.value.onlineDeviceCount = data.onlineDeviceCount

            const total = data.total
            if(total) {
                statisticsData.value.totalAmount = Number(total.totalAmount)
                statisticsData.value.totalChargeOrderCount = Number(total.totalChargeOrderCount)
            }

            const today = data.today
            if(today) {
                statisticsData.value.todayAmount = Number(today.amount)
                statisticsData.value.todayChargeOrderCount = Number(today.chargeOrderCount)
            }

            const yesterday = data.yesterday
            if(yesterday) {
                statisticsData.value.yesterdayAmount = Number(yesterday.amount)
                statisticsData.value.yesterdayChargeOrderCount = Number(yesterday.chargeOrderCount)
            }


        })
    }
    
    queryStatistics()
</script>

<style lang="scss" module src="./index.scss"></style>